<template>
  <div>
    <nav-bar>
      <div slot="center">个人辅助工时申请</div>
    </nav-bar>
    <van-nav-bar
      class="app-nav-bar"
      title="辅助工时审核列表"
      left-arrow
      @click-left="onClickLeft()"
    />

    <div class="m-grid">
      <table border="0" cellPadding="0" cellspacing="0">
        <thead>
          <tr>
            <th>姓名</th>
            <th>频次</th>
            <th>工作内容</th>
            <th>工时</th>
            <th>审核</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(data, index) in applydonelist" :key="index">
            <td>{{ data.USERNAME }}</td>
            <td>{{ data.STEPPER }}</td>
            <td>{{ data.APPLYCONTENT }}</td>
            <td>{{ data.STEPPER * data.STANDARDTIME }}</td>
            <td>
              <button
                style="background-color: #169bd5"
                v-on:click="passApply(data.ID, index)"
              >
                通过
              </button>
              &nbsp;&nbsp;
              <button
                style="background-color: #d9001b"
                v-on:click="refuseApply(data.ID, index)"
              >
                拒绝
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <van-dialog
      v-model="reShow"
      title="拒绝"
      show-cancel-button
      :before-close="beforeClose"
    >
      <van-field v-model="reason" label="理由" placeholder="请输入姓名" />
    </van-dialog>
  </div>
</template>

<script>
import {
  getApplyCheckList,
  updateApplyTimeList,
  refuseApplyTimeList,
} from "../../api/perfrom";
import NavBar from '../../components/NavBar.vue'

import { Dialog } from "vant";
export default {
  name: "applydonelist",
  data() {
    return {
      applydonelist: [],
      reShow: false,
      reValue: "",
      reason: "",
      applyId: "",
      count: "",
    };
  },
  beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
      to.meta.keepAlive = true;  // 让 A 缓存，即不刷新
      next();
  },
  components: {
    NavBar,
    [Dialog.Component.name]: Dialog.Component,
  },

  mounted() {
    this.getInfoList();
  },
  methods: {
    getInfoList() {
      console.log("1");
      getApplyCheckList()
        .then((res) => {
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].STATUS === "0") {
              this.applydonelist.push(res.data[i]);
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onClickLeft() {
      this.$router.push("/perform");
    },
    passApply(applyId, index) {
      Dialog.confirm({
        title: "通过",
        message: "确定要通过吗？",
      }).then(() => {
        console.log(applyId);
        const params = { id: applyId, status: "1" };
        updateApplyTimeList(params)
          .then((res) => {
            this.applydonelist.splice(index, 1);
          })
          .catch((err) => {});
      });
    },

    refuseApply(id, index) {
      this.reShow = !this.reShow;
      this.applyId = id;
      this.count = index;
    },
    beforeClose: function (action, done) {
      if (action === "confirm") {
        const params = { id: this.applyId, status: "2", content: this.reason };
        console.log(params);
        refuseApplyTimeList(params)
          .then((res) => {
            this.applydonelist.splice(this.count, 1);
          })
          .catch((err) => {});
        done();
      } else if (action === "cancel") {
        console.log("取消");
        done();
      }
    },
  },
};
</script>

<style scoped lang="less">
.m-grid {
  margin-top: 136px;
}
table {
  width: 100%;
  padding: 0 2px 0 2px;
}
table tr th {
  color: #646566;
  font-weight: 300;
  padding: 0.3rem 0.1rem;
  font-size: 0.4rem;
  border-bottom: 1px solid #7f7f7f;
}
table tr td {
  color: #646566;
  padding: 13px 0;
  text-align: center;
  font-size: 0.373333rem;
  border-bottom: 1px solid #7f7f7f;
  button {
    border-radius: 5px;
    padding: 2px 6px;
    border: none;
    color: #fff;
    background-color: #169bd5;
  }
}
</style>
